<script type="text/javascript">

function showImage(id) {
    var data=$('#galleryTable').getRowData(id);    
    $("#pictureDiv").html('<img src="/images/groups/<?=$this->groupTitle?>/' + data.filename  + '">');

}


function removeImage() {
    var imageid = $("#galleryTable").getGridParam("selrow");
    if (!imageid) {
            $("#dialog").data('title.dialog', "No row selected" );
            $("#dialog p").text("Please select an image to remove");
            $("#dialog").dialog('open');
            return;
    } else {
        $.post('/image/image-remove/imageid/' + imageid,{},function(data){
                                    var obj = eval ('(' + data + ')');
                                    $("#galleryTable").trigger("reloadGrid");
                                    $("#dialog").data('title.dialog', obj.success == 1 ? "Done" : "Notice");
                                    $("#dialog p").text(obj.message);
                                    $("#dialog").dialog('open');

        });
    }
}

$(document).ready(function() {

    jQuery("#galleryTable").jqGrid({
           onSelectRow: function(id) {showImage(id);},
           sortable: true,
           ajaxGridOptions : {type:"POST"},
           url:'/image/get-image-table-json/groupid/<?=$this->groupId?>',
           datatype: "json",
           colNames:['Id','Title','Description','Filename', 'Timestamp'],
           colModel:[ {name:'id',index:'id', width:55},
               {name:'title',index:'title',width:150,editable:true},
               {name:'description',index:'description', width:170,editable:true},
               {name:'filename',index:'filename', width:150},
               {name:'timestamp',index:'timestamp', width:160}],
           rowNum:20,
           rowList:[10,20,30,40,50],
           imgpath: '/js/jqGrid/themes/<?=$this->jqGridTheme?>/images',
           pager: '#pager2',
           sortname: 'id',
           viewrecords: true,
           sortorder: "asc",
           editurl:'/image/set-image-table-json/groupid/<?=$this->groupId?>',
           caption:"Images List" }).
           navGrid('#pager2',{edit:true,add:false,del:false})
                 .navButtonAdd('#pager2',{
                     title:"Remove Image",
                     caption:"",
                     buttonicon:"ui-icon-trash",
                     onClickButton: removeImage,
                     position:"first"
                 })
                 .navButtonAdd('#pager2',{
                     id:'add_button',
                     title:"Add Image",
                     caption:"",
                     buttonicon:"ui-icon-plus",
                     position:"first"
                 });

	new AjaxUpload('#add_button', {
		  // Location of the server-side upload script
		  action: '/image/image-upload/groupid/<?=$this->groupId?>',
		  // File upload name
		  name: 'imagefile',
		  // Additional data to send
		  data: {},
		  // Submit file after selection
		  autoSubmit: true,
		  // The type of data that you're expecting back from the server.
		  // Html (text) and xml are detected automatically.
		  // Only useful when you are using json data as a response.
		  // Set to "json" in that case.
		  responseType: false,
		  // Fired after the file is selected
		  // Useful when autoSubmit is disabled
		  // You can return false to cancel upload
		  // @param file basename of uploaded file
		  // @param extension of that file
		  onChange: function(file, extension){},
		  // Fired before the file is uploaded
		  // You can return false to cancel upload
		  // @param file basename of uploaded file
		  // @param extension of that file
		  onSubmit: function(file, extension) {},
		  // Fired when file upload is completed
		  // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
		  // @param file basename of uploaded file
		  // @param response server response
		  onComplete: function(file, response) {
                                var obj = eval ('(' + response + ')');
                                $("#galleryTable").trigger("reloadGrid");
                                $("#dialog").data('title.dialog', obj.success == 1 ? "Done" : "Notice");
                                $("#dialog p").text(obj.message);
                                $("#dialog").dialog('open');
                                
			  }
		});


        $("#dialog").dialog({
            bgiframe: true,
            modal: true,
            autoOpen: false,
            resizable: false,
            buttons: {
                Ok: function() {
                    $(this).dialog('close');
                }
            }
        });



});


</script>
<h3> Images Group/Gallery <?=$this->groupTitle?></h3>
<table id="galleryTable" class="scroll" cellpadding="0" cellspacing="0">
</table>
<div id="pager2" class="scroll" style="text-align:center;"></div>

<div id="dialog" class="dialog" title="">
    <p>
    </p>
</div>

<div id="pictureDiv" style="padding-top:20px;text-align:center;"></div>